<template>
    <div class="login">
        <div class="loginDiv">
            <div class="loginTop">
                <span><strong>黑马校园后台</strong></span>
            </div>
            <div class="logininput">
                <input type="text" placeholder="请输入用户名" v-model="username">
                <input type="text" placeholder="请输入密码" v-model="password">
            </div>
            <div class="button">
                <button @click="userlogin()">点此登录</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'Login',
    data(){
        return{
            password:'',
            username:''
        }
    },
    methods:{
        userlogin(){
            if(this.username==''){
                alert("用户名不可为空")
            }else if(this.password == ''){
                alert("用户密码不可为空")
            }else{
                axios.post(`http://123.57.251.41:8080/users/login?password=${this.password}&username=${this.username}`).then(
                response =>{
                    console.log('登录成功了')
                    alert(response.data.data.list)
                    this.$router.replace('/useradmin')
                },
                error =>{
                    console.log(id)
                    alert("登录失败，请检查用户名与密码是否正确",console.log(error))
                }
            )
            }
        }
    }
}
</script>

<style lang="less">
.login{
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: white;
    top: 0;
    left: 0;
    z-index: 1004;
    background-image: url(../assets/background.jpg);
    background-size: 100% 100%;
    .loginDiv{
        width: 450px;
        height: 300px;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -225px;
        margin-top: -200px;
        border-radius: 8px;
        padding: 24px;
    }
    .loginTop{
        width: 100%;
        height: 40px;
        font-size: 20px;
        color: white;
        text-align: center;
    }
    .logininput{
        width: 100%;
        height: 160px;
        // background-color: white;
        padding: 10px;
        input{
            width: 100%;
            height: 40px;
            margin-bottom: 20px;
            margin-top: 10px;
            background-color: transparent;
            color: white;
            font-size: 16px;
            border-top: none;
            border-left: none;
            border-right: none;
        }
    }
    .button{
        width: 100%;
        height: 30px;
        text-align: center;
        button{
            width: 180px;
            height: 30px;
            background-color: transparent;
            color: white;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }
    }
}
</style>